<!DOCTYPE html>
<html ng-app="chargingserver">
<head>
    <title>Mobicents Charging Server</title>

    <link rel="icon" type="image/png" href="resources/images/favicon.png">
    <link rel="stylesheet" href="resources/css/font-awesome.min.css" />
    <link rel="stylesheet" href="resources/css/bootstrap-combined.no-icons.min.css" />
    <link rel="stylesheet" href="resources/css/charging-server.css" />
    <style type="text/css">

        .sidebar-nav {
            padding: 9px 0;
        }

            /* Sticky footer styles
            -------------------------------------------------- */

        html,
        body {
            height: 100%;
            /* The html and body elements cannot have any padding or margin. */
        }

            /* Wrapper for page content to push down footer */
        #wrap {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            /* Negative indent footer by it's height */
            margin: 0 auto -75px;
        }

            /* Set the fixed height of the footer here */
        #push,
        #footer {
            height: 75px;
        }
        #footer {
        }

            /* Custom page CSS
            -------------------------------------------------- */
            /* Not required for template or sticky footer method. */

        .container {
            width: auto;
            max-width: 680px;
        }

        #wrap > .container-fluid {
            padding-top: 60px;
        }
        .container .credit {
            margin: 20px 0;
        }

            /* Lastly, apply responsive CSS fixes as necessary */
        @media (max-width: 767px) {
            #footer {
                margin-left: -20px;
                margin-right: -20px;
                padding-left: 20px;
                padding-right: 20px;
            }
            #wrap > .container-fluid {
                padding-top: 0px;
            }
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
            #wrap > .container-fluid {
                padding-top: 0px;
            }
        }


    </style>

    <!-- Angular does some things with CSS so it's good to load this in the head -->
    <script type="text/javascript" src="resources/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="resources/js/angular.min.js"></script>
    <script type="text/javascript" src="resources/js/angular-resource.min.js"></script>
    <script type="text/javascript" src="resources/js/underscore-min.js"></script>
    <script type="text/javascript" src="resources/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="resources/js/ui-bootstrap-0.4.0.min.js"></script>
    <script type="text/javascript" src="resources/js/charging-server.js"></script>
    <script type="text/javascript" src="resources/js/controllers.js"></script>
</head>
<body>
<div id="wrap">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="brand"><img class="logo-image" src="resources/img/telestax-logo-dark.png" /> <strong>CON</strong>VERGED <strong>CHA</strong>RGING SERVER </span>
                <div class="nav-collapse collapse">
                    <p class="navbar-text pull-right">
                      <span class="user-name">
                          <i class="icon-user"></i> <a href="#" class="navbar-link">Administrator</a>
                      </span>
                        &nbsp; <a href="#" class="btn btn-danger btn-small"><i class="icon-off"></i> Sign Out</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div id="left-sidebar" class="span2">
                <ul class="nav nav-list">
                    <li class="nav-header">&nbsp;</li>
                    <hr/>
                    <li class="text-center"><a href="#/users"><i class="icon-group icon-3x"></i> <h4>Users</h4></a></li>
                    <hr/>
                    <li class="text-center"><a href="#/services"><i class="icon-cog icon-3x"></i> <h4>Services</h4></a></li>
                    <hr/>
                    <li class="text-center"><a href="#/promotions"><i class="icon-credit-card icon-3x"></i> <h4>Promotions</h4></a></li>
                    <hr/>
                </ul>
            </div>
            <div id="content" class="span10">
                <div class="container-fluid">
                    <div class="row">
                        <div class="span12">
                            <img src="resources/img/concha-logo.png" />
                            <div ng-show="flash.message">
                                <br />
                                <alert type="flash.type" close="flash.message = ''">{{ flash.message }}</alert>
                            </div>
                            <hr/>
                        </div>
                    </div>
                    <div class="row" ng-view></div>
                 </div>
            </div>
        </div>
    </div>
    <div id="push"></div>
    <div id="footer">
        <div class="container">
            <h4 class="pull-right">POWERED BY MOBICENTS <small>(c) 2013 TeleStax </small></h4>
        </div>
    </div>
</div>
</body>
</html>